iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 4

第三章、我是愛與正義的水少服戰士,要代替 視差滾動 懲♥︎罰♥︎你

  • 分享至 

  • xImage
  •  

前言

網頁動畫起手式不難,透過一些視覺暫留、前後景的切換,就可以做出最簡的單(偽)動畫效果。。


參考網站


參考網站

像這樣的網站已經是近幾年網站設計趨勢,可以簡單的與使用者有互動,也不會過於複雜造成網頁負荷。

接下來的入門菜,就讓我們來試試看最簡單的一種視差滾動製作方式吧!

簡介

由於要利用到視覺暫留的特性,我們在這邊要介紹一種特別的 CSS 語法 background-attachment,他能決定圖片是否隨著 使用者裝置視窗(Viewport) 移動。

background-attachment: scroll, local; 效果


background-attachment 基礎語法

background-attachment: value, value;
名稱 說明
value 可調用屬性值

fixed

背景圖片相對 viewport 為固定效果。要注意的是,每一個 viewport 都只有一個視口,所以即便元素具有滾動的機制,元素的背景也會固定在原地不動。

local

背景相對元素為固定,若元素本身具有滾動功能,則背景也會隨著元素一起滾動,而 背景渲染區域背景定位區域,則是相對於元素的可滾動區域,而不是外層框架的邊框,對於可滾動的元素,border-box value of background-clip。可被視為與 padding-box 相同。

scroll

背景相對於元素本身就是固定的,且並在元素本身滾動時,不會跟著元素滾動。


魔法變身

各位騷年騷女們,恭喜你們被天選為魔法少女(男),現在,我將賦予你強大的力量,趕快跟我一起大聲喊出那句變身咒語吧!!

  • 我們先將需要滾動的元素框架架好,並且讓內層元素絕對定位於外層元素。
<div class="outer">
  <div class="box image01"></div>
  <div class="box image02"></div>
  <div class="box image03"></div>
  <div class="box image04"></div>
  <div class="box image05"></div>
</div>
.outer {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
  • 接著我們來調整圖片位置、大小等視覺效果。由於我想要讓變身過程有個循環的感覺,所以在第一張跟第五張放了相同照片。
.image01 {
  height: 500px;
  background-image:   url("https://i.imgur.com/WtI10Zz.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image02 {
  height: 300px;
  margin-top: 30%;
  background-image:   url("https://i.imgur.com/jBiGrVW.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image03 {
  height: 300px;
  margin-top: 60%;
  background-image:   url("https://i.imgur.com/YP9gDCw.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

.image04 {
  height: 300px;
  margin-top: 90%;
  background-image:   url("https://i.imgur.com/V8eAerR.jpg");
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.image05 {
  height: 300px;
  margin-top: 120%;
  background-image:   url("https://i.imgur.com/WtI10Zz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}
  • 將 元素的 背景圖片 相對固定於 viewport 上,如此一來元素隨著視窗滾動的時候也不會隨著元素滾動,讓不同的背景圖片做到自然切換的效果。
.image01 {
  height: 500px;
  background-image: url("https://i.imgur.com/WtI10Zz.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

完成

Moon prism power, make-up!


今天帶大家對於神秘力量的操控,小試身手了一下,有沒有覺得很有趣呢?
視差滾動效果不僅只有透過 background-attachment 來讓視覺上做出有趣變化,還有其他諸如 perspective + transfrom 3D 創造3維空間的語法做出更加特別的視覺效果。

那麼今天就先介紹的這邊,魔法少女要先去換裝啦~ 大家明天見!


參考資料


上一篇
第二章、網頁動畫到底在幹尛?才不告訴逆咧~咧、咧~
下一篇
第四章、今晚,我想來點...雙重口感切換的 Transition
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
mangoSu
iT邦新手 5 級 ‧ 2020-09-27 18:03:20

看完30篇文章,人人都可以是魔法少女/images/emoticon/emoticon30.gif

CathyShen iT邦新手 4 級 ‧ 2020-09-28 13:34:17 檢舉

每個魔法少女身邊都會有一隻吉祥物。
請問可以收編我這隻吉祥物嗎?
我會自己去上廁所不用別人清喔~ (ˇωˇ人)

0
lisa0903
iT邦新手 5 級 ‧ 2020-09-28 22:52:08

新屬性習得!!這個標題很讚!

0
heiyuyu
iT邦新手 5 級 ‧ 2023-01-20 16:01:51

好喜歡的命題/images/emoticon/emoticon30.gif
覺得一看就學會了!

CathyShen iT邦新手 4 級 ‧ 2023-05-22 18:40:09 檢舉

前陣子去看完美少女戰士的舞台劇,帶著滿滿的感動回來。
我想我也能以這種方式小小的體驗一下當魔法少女的感覺吧
(⸝⸝⸝ ᵒ̴̶̷̥́ ᗣ ᵒ̴̶̷̣̥̀⸝⸝⸝)

我要留言

立即登入留言